<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>门户页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
</head>
<body>
   <div class="center">
       <img src="img/menhu/dom.png" alt="">
       <div class="block block1"></div>
       <div class="block block2"></div>
       <div class="block block3"></div>
       <div class="block block4"></div>
       <div class="block block5"></div>
       <div class="block block6"></div>
   </div>
   <div class="dialog" style="display: none;">
       <div class="mark"></div>
       <div class="wrapBox">
           <div class="blockClose"></div>
           <div class="carouselWrap">
               <div class="swiper-container">
                   <div class="swiper-wrapper">
                       <div class="swiper-slide">
                           <img src="img/menhu/banner1.png" alt="">
                       </div>
                       <div class="swiper-slide">
                           <img src="img/menhu/banner2.png" alt="">
                       </div>
                       <div class="swiper-slide">
                           <img src="img/menhu/banner3.png" alt="">
                       </div>
                       <div class="swiper-slide">
                           <img src="img/menhu/banner4.png" alt="">
                       </div>
                       <div class="swiper-slide">
                           <img src="img/menhu/banner5.png" alt="">
                       </div>
                       <div class="swiper-slide">
                           <img src="./img/menhu/banner6.png" alt="">
                       </div>
                   </div>
               </div>
               <div class="swiper-pagination"></div>
           </div>
       </div>
   </div>
   <script src="js/lib/zepto.min.js"></script>
   <script src="js/lib/swiper.min.js"></script>
   <script>
      $(function (){
          var mySwiper;
          var first = true;
          var width = document.documentElement.clientWidth
              || document.body.clientWidth || window.innerWidth;
          var height = document.documentElement.clientHeight
              || document.body.clientHeight || window.clientHeight;
          if (width / height >= 1920 / 1080 ) {
              $(".center").css('height',height)
              $(".center").css('width',height * 1920 / 1080)
          } else {
              $(".center").css('width',width)
              $(".center").css('height',width * 1080 / 1920 )
          }

          $(".block").click(function (){
              var index = $(".block").index($(this));
              $(".dialog").show();
              if (first) {
                  mySwiper = new Swiper('.swiper-container',{
                      initialSlide: index,
                      pagination: {
                          clickable :true,
                          el: '.swiper-pagination',
                      }
                  })
                  first = false;
              } else {
                  mySwiper.slideTo(index, 0, false)
              }

          })

          $(".blockClose").click(function () {
              $(".dialog").hide();
              // mySwiper = null;
          })

          $(".mark").click(function () {
              $(".dialog").hide();
          })

      })
   </script>

</body>

</html>
